<template>
<div class="hello">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"class="demo-ruleForm">
  <el-collapse accordion>
  <el-collapse-item>
    <template slot="title">
      <i class="el-icon-edit-outline"></i>
      点击留言
    </template>
  <el-form-item prop="name">
    <el-input  v-model="ruleForm.name" :autosize="{maxRows: 1}" placeholder="请输入您的昵称" ></el-input>
  </el-form-item>
  <el-form-item prop="desc">
    <el-input  type="textarea" v-model="ruleForm.desc" autosize placeholder="请输入留言内容" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  </el-form-item>
  </el-collapse-item>
</el-collapse>
</el-form>
</template>
<script>
  export default {
    data () {
      return {
        ruleForm: {
          name: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入您的昵称', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入留言内容', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-weight: normal;
}
</style>
